<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>首页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="./js/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="./css/style.css" media="all">
    <style type="text/css">
    body {
      background-color: #f6f6f6;
    }
    .search {
      background: #fff;
      padding: 20px;
    }
    #main input {
      border-radius: 4px;
    }
    #main input:focus {
      /* border:1px solid #1E9FFF; */
      /* box-shadow: 0 0 5px #1E9FFF; */
    }
    .content {
      min-height: 400px;
      margin-top: 30px;
      background: #fff;
    }
    .content .link {
      color: #1E9FFF;
      cursor: pointer;
      text-decoration: underline;
    }
    .result-tips {
      border-bottom: 1px solid #f3f3f3;
      background: #fcfcfc;
      color: #333;
      padding: 10px 16px;
      line-height: 28px;
    }
    .result-tips .num-title {
      max-width: 606px;
      display: inline-block;
      vertical-align: top;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      overflow: hidden;
      word-break: keep-all;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .tips-num {
      color: #ff3b30;
    }
    .tips-fen {
      color: #ff9800;
      padding: 0 5px;
    }
    .tips-num:after,
    .tips-num:before {
      content: ' ';
    }
    .search-list {
      width: 90%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin: 0 auto;
    }
    .search-list li {
      border: 1px solid #dcdcdc;
      border-radius: 4px;
      padding: 15px 20px;
      width: 45%;
      margin: 10px 0;
      position: relative;
    }
    .search-list li:hover {
      -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .12), 0 0 0 1px rgba(0, 0, 0, .07);
      box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.06);
      -webkit-transition: -webkit-box-shadow .3s;
      transition: -webkit-box-shadow .3s;
      transition: box-shadow .3s;
      transition: box-shadow .3s, -webkit-box-shadow .3s;
    }
    .search-list li .score {
      position: absolute;
      text-align: right;
      right: 24px;
      top: 59px;
      line-height: 26px;
      font-size: 14px;
      vertical-align: bottom;
      color: #1E9FFF;
    }
    .search-list li .score .score-num {
      font-size: 20px;
      color: #ff9800;
    }
    .search-list li .score .score-fen {
      font-size: 12px;
      color: #ff9800;
    }
    .search-list li h3.header {
      height: 30px;
      line-height: 30px;
      font-size: 18px;
      font-weight: 700;
      color: #333;
      cursor: pointer;
    }
    .search-list li:hover h3.header {
      color: #1E9FFF;
    }
    .search-list li h3.header em {
      font-style: normal;
      color: #ff3b30;
    }
    .none,.load{
      height: 300px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .flex-wrap {
      display: flex;
      justify-content: space-between;
    }
    .search-item {
      margin: 5px 0;
    }
    .tit,
    .text {
      font-size: 16px;
    }
    .tit {
      color: #333;
      font-weight: bold;
    }
    .text {
      color: #333;
      line-height: 24px;
    }
    .brief {
      /* padding-left: 10px; */
    }
    .ov {
      display: block;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      width: 95%;
    }
    .page-box {
      padding: 15px 0;
    }
    .page-wrap {
      display: flex;
      justify-content: center;
    }
    .hide {
      display: none;
    }
    .main{
        display:flex;
        margin-top:20px;

    }
    .main .left{
        flex:1;
    }
    .main .right{
        flex:1;
    }
    #test1{
        position: absolute;
        bottom:10px;
        right:10px;
    }
    #upload-box{
        position: relative;
        border:1px solid #ddd;
        width:96%;
        margin-top:10px;
        min-height:400px;
    }
     .image-input {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 100px;
            padding: 20px 10px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            z-index: 9;
            background: rgba(0, 0, 0, .5);
        }

        .image-input .image-input-container {
            position: relative;
            width: 100%;
            height: 38px;
            font-size: 0;
        }

        .image-input .image-input-container .image-button,
        .image-input .image-input-container .image-local,
        .image-input .image-input-container .image-url {
            display: inline-block;
            vertical-align: middle;
            height: 38px;
            line-height: 36px;
            color: #ccc;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            border: 1px solid #666;
            outline: none;
            background-color: rgba(0, 0, 0, .45);
        }

        .image-input .image-input-container .image-url {
            width:60%;
            font-size: 14px;
            line-height: 36px;
            outline: none;
            text-indent: 11px;
            border-right: 0;
        }

        .image-input .image-input-container .image-button {
            min-width: 116px;
            font-size: 14px;
        }
        .image-input .image-input-container .image-button:hover {
           cursor:pointer;
           background:#1E9FFF;
        }

        .image-input .image-input-container .image-text {
            display: inline-block;
            vertical-align: middle;
            margin: 0 30px;
            font-size: 16px;
            color: #ccc;
            line-height: 38px;
            background: transparent;
            border: none;
        }

        .image-input .image-input-container .image-local {
            width: 116px;
            font-size: 16px;
            line-height: 38px;
            text-align: center;
            color: #fff;
            background-color: #0073eb;
            border: none;
        }

        .image-input .image-input-container .image-local-input {
            width: 100%;
            height: 100%;
            display: none;
        }

        input[type="file"i] {
            -webkit-appearance: initial;
            background-color: initial;
            cursor: default;
            align-items: baseline;
            color: inherit;
            text-align: start !important;
            padding: initial;
            border: initial;
        }

        .image-input .image-notice {
            margin-top: 10px;
            color: #ccc;
            font-size: 12px;
        }

        .tech-recognition-scan {
            position: absolute;
            z-index: 7;
            top: 0;
            left: 0;
            width: 100%;
            border-bottom: 3px solid #3e88f1;
            -webkit-animation: scan 1.2s infinite;
            -moz-animation: scan 1.2s infinite;
            animation: scan 1.2s infinite;
            background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#3e88f1));
            background: -webkit-linear-gradient(top, transparent, #3e88f1);
            background: -moz-linear-gradient(top, transparent, #3e88f1);
            background: linear-gradient(180deg, transparent, #3e88f1);
        }

        @keyframes scan {
            from {
                height: 0;
            }

            to {
                opacity: 0;
                height: 550px;
            }
        }

        @-webkit-keyframes scan {
            from {
                height: 0;
            }

            to {
                opacity: 0;
                height: 550px;
            }
        }


    </style>
</head>
<body>
<div id="main" style="width: 1400px;margin: 30px auto;">
    <div class="head"></div>
    <div class="main">
        <div class="left">
            <div class="layui-upload" id="upload-box">
                <!--                <button type="button" class="layui-btn" id="test1">上传图片</button>-->
                <div class="layui-upload-list" style="margin:0;">
                    <img class="layui-upload-img" id="demo1" src="./img/demo.png" style="width:100%;height:100%;">
                    <p id="demoText"></p>
                </div>
                <div class="tech-recognition-scan" style="display: none;"></div>
                <div class="image-input">
                    <div class="image-input-container">
                        <input type="text" spallcheck="false" placeholder="请输入网络图片URL" id="img-url" class="image-url">
                        <button class="image-button" id="jiance">检测</button>
                        <div class="image-text">或</div>
                        <button type="button" class="layui-btn layui-btn-sm" id="test1" style="top:2px;">上传图片</button>
                    </div>
<!--                    <div class="image-notice">图片文件类型支持PNG、JPG、JPEG、BMP，图片大小不超过2M。</div>-->

                </div>
            </div>
        </div>
        <div class="right">
            <table class="layui-table" lay-size="sm">

                <thead>
                <tr>
                    <th>序号</th>
                    <th>车牌</th>
                    <th>车牌类型</th>
                    <th>置信度</th>
                </tr>
                </thead>
                <tbody id="result">
                <tr>
                    <td colspan="4" style="text-align:center;">未检测到车牌</td>
                </tr>
                </tbody>
            </table>

        </div>

    </div>


</div>
<script src="./js/jquery-3.0.0.js" charset="utf-8"></script>
<script src="./js/layui/layui.js" charset="utf-8"></script>
<script src="./js/search.js"></script>
<script>
    layui.use('upload', function(){
  var $ = layui.jquery
  ,upload = layui.upload;

  //普通图片上传
  var uploadInst = upload.render({
    elem: '#test1'
    ,url: 'https://httpbin.org/post' //改成您自己的上传接口
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        getData(result);
        $('#demo1').attr('src', result); //图片链接（base64）
      });
    }
    ,done: function(res){

      //如果上传失败
      if(res.code > 0){
        return layer.msg('上传失败');
      }
      //上传成功
    }
    ,error: function(){
      //演示失败状态，并实现重传
      var demoText = $('#demoText');
      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
      demoText.find('.demo-reload').on('click', function(){
        uploadInst.upload();
      });
    }
  });

    $('#jiance').on('click',function(){
    $('#demo1').attr('src',$('#img-url').val());
         var params = {
            query: "query LicenseRecognizer($condition: LicenseRecognizer_argument){\n  LicenseRecognizer(condition:$condition){\n    rows{\n      plateType\n      licensePlate\n      confidence\n    }\n  }\n}",
            variables: {
              condition: {
                imageUrl:$('#img-url').val() || ''
              }
            },
            operationName: "LicenseRecognizer"
          };



          try {
            $.ajax({
              type: "POST",  //提交方式  
              url: "/lpr/graphql_doc_ui",//路径  
              // dataType: 'JSON',
              contentType: "application/json",
              data: JSON.stringify(params),
              success: function (result) {//返回数据根据结果进行相应的处理  
              if (result && result.data && result.data.LicenseRecognizer) {
                    const rows = result.data.LicenseRecognizer.rows;
                    let tbodyStr = '';
                    if(rows && rows.length > 0){
                        rows.forEach((val,i) =>{
                            tbodyStr += `<tr>
                                <td>${i}</td>
                                 <td>${val.licensePlate}</td>
                                 <td>${val.plateType}</td>
                                 <td>${val.confidence}</td>
                            </tr>`;
                        })
                         $('#result').html(tbodyStr);
                    }else{

                         $('#result').html('<tr><td colspan="4" style="text-align:center;">未检测到车牌</td></tr>');
                    }



                }else{
                  layer.alert('出错了', {icon: 5});
                  $('#result').html('<tr><td colspan="4" style="text-align:center;">未检测到车牌</td></tr>');
                }


              },
            });
          } catch{
            $('#none').show();
            $('#load').hide();
            console.log('请求数据出错');
          }



    });
  function getData(fileData) {


          var params = {
            query: "query LicenseRecognizer($condition: LicenseRecognizer_argument){\n  LicenseRecognizer(condition:$condition){\n    rows{\n      plateType\n      licensePlate\n      confidence\n    }\n  }\n}",
            variables: {
              condition: {
                base64Image: fileData
              }
            },
            operationName: "LicenseRecognizer"
          };



          try {
            $.ajax({
              type: "POST",  //提交方式  
              url: "/lpr/graphql_doc_ui",//路径  
              // dataType: 'JSON',
              contentType: "application/json",
              data: JSON.stringify(params),
              success: function (result) {//返回数据根据结果进行相应的处理  
                if (result && result.data && result.data.LicenseRecognizer) {
                    const rows = result.data.LicenseRecognizer.rows;
                    let tbodyStr = '';
                    if(rows && rows.length > 0){
                        rows.forEach((val,i) =>{
                            tbodyStr += `<tr>
                                <td>${i}</td>
                                 <td>${val.licensePlate}</td>
                                 <td>${val.plateType}</td>
                                 <td>${val.confidence}</td>
                            </tr>`;
                        })
                         $('#result').html(tbodyStr);
                    }else{

                         $('#result').html('<tr><td colspan="4" style="text-align:center;">未检测到车牌</td></tr>');
                    }



                }else{
                  layer.alert('出错了', {icon: 5});
                  $('#result').html('<tr><td colspan="4" style="text-align:center;">未检测到车牌</td></tr>');
                }

              },
            });
          } catch{
            $('#none').show();
            $('#load').hide();
            console.log('请求数据出错');
          }

        }
  });





</script>
</body>
</html>